<template>
  <div class="orderListCom">
    <div class="orderListCom-title">
      <span class="orderListCom-title-tag"><img src="../../assets/images/home.png" /></span>
      <span class="orderListCom-title-text"> {{data.order.shopName}}</span>
      <span class="orderListCom-title-go"><img src="../../assets/images/gopage.png" /></span>
    </div>

    <div class="orderListCom-list">
      <div class="orderListCom-items" v-for="item in data.order.goodses">
        <div class="orderListCom-items-left">
          <img :src="item.goodsImageUrl" />
        </div>
        <div class="orderListCom-items-right">
          <div class="orderListCom-items-right-name">{{item.goodsName}}</div>
          <div class="orderListCom-items-right-ramke">
            {{item.skuName}}
          </div>
          <div class="orderListCom-items-right-price">
            {{item.goodsPrice|currency}}
          </div>
        </div>
      </div>
      <div class="orderListCom-card">
        <div class="orderListCom-card-orderTotal  orderListCom-card-flex">
          <div class="orderListCom-card-flex-left">商品总价</div>
          <div class="orderListCom-card-flex-right">{{(data.order.goodses[0].goodsPrice*data.order.goodses[0].num).toFixed(2) | currency}}</div>
        </div>
        <div class="orderListCom-card-pTotal orderListCom-card-flex">
          <div class="orderListCom-card-flex-left">运费</div>
          <div class="orderListCom-card-flex-right">{{data.order.mailPrice |currency}}</div>
        </div>
        <div class="orderListCom-card-priceTotal  orderListCom-card-flex">
          <div class="orderListCom-card-flex-left">订单总价</div>
          <div class="orderListCom-card-flex-right">{{data.order.orderPrice |currency}}</div>
        </div>
      </div>

      <div class="orderListCom-total-price orderListCom-card-flex">
        <div class="orderListCom-card-flex-left">实付款</div>
        <div class="orderListCom-card-flex-right">{{data.order.orderPrice |currency}}</div>
      </div>
    </div>
  </div>
</template>
<script>
export default {
  props: ["data"],
  model: {
    prop: "data"
  },
  data() {
    return {
      shopTotal: ""
    };
  }
};
</script>
<style lang="scss" scoped>
.orderListCom {
  padding: 0 0.32rem 0;
  background-color: white;
  margin-top: 0.2133rem;
  .orderListCom-title {
    height: 1.2333rem;
    position: relative;
    display: flex;
    align-items: center;
    font-size: 0.32rem;
    color: rgba(51, 51, 51, 1);
    .orderListCom-title-tag {
      img {
        width: 0.3733rem;
        height: 0.3467rem;
      }
    }
    .orderListCom-title-go {
      img {
        width: 0.3033rem;
        height: 0.3067rem;
      }
    }
    .orderListCom-title-text {
      margin: 0 0.3067rem 0.08rem 0.16rem;
    }
  }
  .orderListCom-list {
    .orderListCom-items {
      display: flex;
      padding: 0.4rem 0 0;
      border-top: 1px solid #eaeaea;
      .orderListCom-items-left {
        padding-bottom: 0.4rem;
        img {
          width: 2.8rem;
          height: 2.8rem;
        }
      }
      .orderListCom-items-right {
        flex: 1;
        padding-left: 0.3333rem;
        .orderListCom-items-right-name {
          font-size: 0.32rem;
          height: 1rem;
          line-height: 0.5rem;
          color: rgba(51, 51, 51, 1);
          overflow: hidden;
          text-overflow: ellipsis;
          display: -webkit-box;
          -webkit-line-clamp: 2;
          -webkit-box-orient: vertical;
        }
        .orderListCom-items-right-ramke {
          font-size: 0.32rem;
          color: rgba(153, 153, 153, 1);
          margin-top: 0.22rem;
        }
        .orderListCom-items-right-price {
          font-size: 0.4267rem;
          color: rgba(243, 9, 1, 1);
          margin-top: 0.3667rem;
        }
      }
    }
    .orderListCom-card {
      line-height: 0.6667rem;
      padding-bottom: 0.4667rem;
      .orderListCom-card-orderTotal {
        font-size: 0.3467rem;
        color: #999999;
      }
      .orderListCom-card-pTotal {
        font-size: 0.3467rem;
        color: #999999;
      }
      .orderListCom-card-priceTotal {
        font-size: 0.3467rem;
        color: #333333;
      }
    }
    .orderListCom-total-price {
      display: flex;
      font-size: 0.4267rem;
      color: rgba(243, 9, 1, 1);
      padding: 0.4667rem 0;
      border-top: 1px solid #f1e8e8;
    }
    .orderListCom-card-flex {
      display: flex;

      .orderListCom-card-flex-left {
        flex: 1;
      }
      .orderListCom-card-flex-right {
      }
    }
  }
}
</style>
